<template>
	<view class="integral_index">
		<view class="integral_point_info">
			<!-- <view>积分</view> -->
			<view class="integral_num">{{userInfo.integral||'0.00'}}<text>积分</text></view>
			<view class="integral_btn">
				<view @click="$nav('/pages/user/money/list?is_type=2')">积分明细</view>
				<view @click="$nav('/pages/user/integral/order')">兑换记录</view>
			</view>
		</view>
		
		<view class="integral_cat">
			<!-- <swiper :circular="true">
				<swiper-item>测试</swiper-item>
				<swiper-item>测试</swiper-item>
				<swiper-item>测试</swiper-item>
			</swiper> -->
			<scroll-view class="scroll_class" scroll-x="true" >
				<view :class="classIndex==k?'integral_cat_item item_hover':'integral_cat_item'" v-for="(v,k) in classList" :key="k" @click="classClick(k,v.id)">{{v.name}}</view>
				
			</scroll-view>
		</view>
		
		<view class="integral_goods" >
			<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
				<view class="integral_goods_list" v-for="(v,k) in list" :key="k">
					<view class="imgs"><image :src="v.goods_master_image" mode="aspectFill"></image></view>
					<view class="content">
						<view class="title">{{v.goods_name}}</view>
						<view class="num">库存 {{v.goods_stock||0}} 份</view>
						<view class="inte">市场价 ￥{{v.goods_market_price}}</view>
						<view class="market"><text class="btn" @click="$nav('/pages/user/integral/create?id='+v.id)">立即兑换</text><text class="price">{{v.goods_price}}</text>积分</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					class_id:0
				},
				classList:[{id:0,name:'热门推荐'}],
				classIndex:0,
				list:[],
				userInfo:{
					integral:0.00
				},
			};
		},
		onLoad() {
			this.checkLogin()
			this.get_class();
		},
		methods:{
			classClick(k,id){
				this.classIndex = k;
				this.params.class_id = id;
				this.mescroll.resetUpScroll();
			},
			checkLogin(){
				this.$http(this.$api.checkLogin).then(res=>{
					if(res.code == 200){
						this.userInfo = res.data;
					}else{
						this.$nav('',3);
					}
				})
			},
			get_class(){
				let obj = {...this.$api.integrals}
				obj.url += '/goods_class'
				this.$http(obj).then(res=>{
					res.data.forEach(item=>{
						this.classList.push(item);
					})
					
				})
			},
			upCallback(page){
				this.params.page = page.num; 
				this.params.per_page = page.size; 
				
				this.$http(this.$api.integrals,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); 
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss">
.integral_goods_list{
	background-color: #fff;
	padding: 30upx;
	margin-bottom: 20upx;;
	.content{
		font-size: 28upx;
		.title{
			white-space: wrap;
			height: 48upx;
			overflow: hidden;
		}
		.num{
			font-size: 24upx;
			display: inline-block;
			padding: 0 8upx;
		}
		.inte{
			line-height: 80upx;
			font-size: 24upx;
			color:#aaa;
		}
		.market{
			.price{
				font-size: 34upx;
				margin-right: 6upx;
				color:$uni-color-error;
			}
			.btn{
				color:#fff;
				padding: 6upx 14upx;
				margin-right: 45upx;
				float: right;
				border-radius: 8rpx;
				background-color: $uni-color-error;
			}
		}
	}
	.imgs{
		background-color: #f1f1f1;
		border-radius: 6upx;
		float: left;
		margin-right: 30upx;
		image{
			width: 210upx;
			height: 210upx;
		}
	}
	
}
.integral_goods_list:after{
	content:'';
	display: block;
	clear: both;
}
.integral_goods{
	height: 100%;
	padding-top: 20upx;
}
.scroll_class{
	white-space: nowrap;
	width: 100%;
	.integral_cat_item{
		display: inline-block;
		margin-left: 30upx;
		line-height: 80upx;
		border-bottom: 5upx solid #fff;
	}
	.integral_cat_item:last-child{
		margin-right: 30upx;
	}
	.item_hover{
		border-bottom: 5upx solid $uni-color-error;
	}
}
.integral_cat{
	background-color: #fff;
	font-size: 28upx;
}
.integral_point_info{
	color:#fff;
	background: $uni-color-error;
}
.integral_num{
	text{
		font-size: 30upx;
		margin-left: 10upx;
	}
	font-size: 60upx;
	text-align: center;
	padding-top: 60upx;
	
}
.integral_btn{
	font-size: 28upx;
	width: 52%;
	margin:80upx auto 0 auto;
	padding-bottom: 80upx;
	view{
		border:1px solid #fff;
		border-radius: 10upx;
		line-height: 60upx;
		padding: 0 20upx;
		float: left;
	}
	view:nth-child(2){
		float: right;
	}
}
.integral_btn:after{
	content:'';
	display: block;
	clear: both;
}
</style>
